<template>
  <!-- 服务商列表---团队信息详情 -->
  <div class="team-detail">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button type="primary" @click="backList">
            <a-icon type="rollback" />返回
          </a-button>
        </div>
      </a-col>
    </a-row>
    <div class="table-wrapper">
      <div class="top-settle">
        <p>
          总收益:
          <span>{{sums}}</span>
        </p>
      </div>
      <a-table
        :columns="columns"
        :dataSource="teamData"
        rowKey="index"
        :loading="loading"
        :pagination="pagination"
      >
        <span slot="action" slot-scope="text, item" class="action-wrap">
          <a @click="popDetail(item)">查看详情</a>
        </span>
      </a-table>
      <!-- <a @click="$router.push('/menu/provider/list/details/teamProviderDetail')">服务商详情........</a>
      <a @click="$router.push('/menu/provider/list/details/teamMerchantDetail')">商户详情........</a>
      <a @click="$router.push('/menu/provider/list/details/teamMemberDetail')">会员详情........</a>-->
      <!-- <a>二级会员详情........</a> -->
    </div>
    <div class="modal-wrap">
      <a-modal class="common-pop big-pop" title="代理商详情" v-model="agentVis" :footer="null">
        <div>
          <agent-detail />
        </div>
      </a-modal>
      <a-modal class="common-pop big-pop" title="会员详情" v-model="memberVis" :footer="null">
        <div>
          <member-detail />
        </div>
      </a-modal>
      <a-modal class="common-pop big-pop" title="商户详情" v-model="merchantVis" :footer="null">
        <div>
          <merchant-detail />
        </div>
      </a-modal>
      <a-modal class="common-pop big-pop" title="服务商详情" v-model="partnerVis" :footer="null">
        <div>
          <partner-detail />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
// 团队信息
import { partnerTeam } from '../../../store/providerApi'
export default {
  name: 'team',
  components: {
    agentDetail: () => import('./teamDetail/agentDetail.vue'),
    memberDetail: () => import('./teamDetail/memberDetail.vue'),
    merchantDetail: () => import('./teamDetail/merchantDetail.vue'),
    partnerDetail: () => import('./teamDetail/providerDetail.vue')
  },
  data() {
    return {
      agentVis: false,
      memberVis: false,
      merchantVis: false,
      partnerVis: false,
      columns: [
        {
          dataIndex: 'index',
          title: '类型'
        },
        {
          title: '总数量',
          dataIndex: 'num'
        },
        {
          dataIndex: 'enable',
          title: '有效数量'
        },
        {
          title: '待审核数量',
          dataIndex: 'no_verify'
        },
        {
          dataIndex: 'no_valid',
          title: '无效数量'
        },
        {
          title: '收益',
          dataIndex: 'income'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      teamData: [],
      loading: false,
      pagination: false,
      sums: 0
    }
  },
  mounted() {
    partnerTeam({
      id: this.$route.query.id
    }).then(res => {
      // console.log(res)
      let datas = res.data
      this.sums = res.data.sum
      this.teamData = [
        {
          index: '代理商',
          num: datas.partner_invite_agent_num,
          enable: datas.partner_invite_agent_enable,
          no_verify: datas.partner_invite_agent_no_verify,
          no_valid: datas.partner_invite_agent_no_valid,
          income: datas.partner_invite_agent_income
        },
        {
          index: '会员',
          num: datas.partner_invite_member_num,
          enable: datas.partner_invite_member_enable,
          no_verify: datas.partner_invite_member_no_verify,
          no_valid: datas.partner_invite_member_no_valid,
          income: datas.partner_invite_member_income
        },
        {
          index: '商户',
          num: datas.partner_invite_merchant_num,
          enable: datas.partner_invite_merchant_enable,
          no_verify: datas.partner_invite_merchant_no_verify,
          no_valid: datas.partner_invite_merchant_no_valid,
          income: datas.partner_invite_merchant_income
        },
        {
          index: '服务商',
          num: datas.partner_invite_partner_num,
          enable: datas.partner_invite_partner_enable,
          no_verify: datas.partner_invite_partner_no_verify,
          no_valid: datas.partner_invite_partner_no_valid,
          income: datas.partner_invite_partner_income
        }
      ]
    })
  },
  methods: {
    popDetail(item) {
      console.log(item)
      if (item.index === '代理商') {
        this.agentVis = true
      } else if (item.index === '会员') {
        this.memberVis = true
      } else if (item.index === '商户') {
        this.merchantVis = true
      } else if (item.index === '服务商') {
        this.partnerVis = true
      }
    },
    backList() {
      this.$router.push('/menu/provider/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.team-detail {
  .top-settle {
    height: 56px;
    display: flex;
    align-items: center;
    // justify-content: space-around;
    border: 1px solid #eee;
    margin-top: 12px;
    margin-bottom: 12px;
    p {
      margin-bottom: 0;
      padding-left: 20px;
    }
  }
  .top-btns {
    margin-top: 20px;
  }
  .ant-table-wrapper {
    margin-top: 0;
  }
}
</style>